<template>
  <div>
    <ul class="clearfix">
      <li>
        <router-link to="/sanDianEr/xtx">新特性</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/zjtx">组件通信</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/v-modelZjtx">v-model组件通信</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/zjtxRef">组件通信ref</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/provideInject">provide和inject</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/ccSlot">插槽slot</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/dtzj">动态组件</router-link>
      </li>
    </ul>
    <ul class="clearfix">
      <li>
        <router-link to="/sanDianEr/jssx">计算属性</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/jk">监控</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/lydhy">路由导航页</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/vuex">vuex</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/cssblzr">CSS变量注入</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/smzq">生命周期</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/dmcfcs">代码拆分测试</router-link>
      </li>
      <li>
        <router-link to="/sanDianEr/hooks">hooks使用</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
export default {
  name: "",
  // 定义模板
  components: {},
  //在创建组件之前执行。
  setup(props, context) {
    const state = reactive({
      name: "vue3.2",
    });
    const num = ref(0);
    return {
      ...toRefs(state),
      num,
    };
  },
};
</script>
<style scoped lang ='less'>
ul {
  margin-top: 30px;
}
ul li {
  float: left;
  margin: 4px 10px;
  list-style: none;
}
a {
  color: #000;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>